import React, { Component } from 'react';
import { Card,Divider,Modal } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './RadioStationInfo.less';

const { Description } = DescriptionList;
export default class RadioStationInfo extends Component {
  state = {
    previewImage: '',
    previewVisible: false,
  }

  handlePreview = (file) => {
    this.setState({
      previewImage: file,
      previewVisible: true,
    });
  }

  handleCancel = () => {
    this.setState({ previewVisible: false })
  }

  render() {
    const { previewVisible, previewImage } = this.state;
    const filelist = [
      require('../../../public/1.jpg'),
      require('../../../public/2.jpg'),
      require('../../../public/3.jpg'),
      require('../../../public/4.jpg'),
      require('../../../public/5.png')];
    return (
      <PageHeaderLayout >
        <Card bordered={false}>
          <DescriptionList size="large" title="基础信息" style={{ marginBottom: 32 }} col={1}>
            <Description term="电台名称">新疆949交通广播</Description>
            <Description term="所属单位">新疆人民广播电台</Description>
            <Description term="所在地区">新疆-乌鲁木齐</Description>
            <Description term="联系人">张三</Description>
            <Description term="联系电话">15276865613</Description>
            <Description term="身份证"> <div>
              <img src={filelist[0]} style={{width:60,height:60,marginLeft:20,cursor:"pointer" }}  onClick={() => this.handlePreview(filelist[0]) } />
              <img src={filelist[1]} style={{width:60,height:60,marginLeft:20,cursor:"pointer" }}  onClick={() => this.handlePreview(filelist[1]) } />
            </div></Description>
            <Description term="营业执照"> <div>
              <img src={filelist[0]} style={{width:60,height:60,marginLeft:20,cursor:"pointer" }}  onClick={() => this.handlePreview(filelist[0]) } />
            </div></Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="微信授权" style={{ marginBottom: 32 }} col={1}>
            <Description term="APPID">wxacd31ab99998c832</Description>
            <Description term="APPSecret">4d8881d2525f15c7bec3a8069f7fa8ed</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="电台服务" style={{ marginBottom: 32 }} col={1}>
            <Description term="在线收听地址">rtmp://47.93.252.219/oflaDemo/1065 live=1</Description>
            <Description term="视频直播地址">http://fm.shuoba.org/channel3/1411/48.m3u8</Description>
            <Description term="微信公众号二维码"> <div>
              <img src={filelist[4]} style={{width:60,height:60,marginLeft:20,cursor:"pointer" }}  onClick={() => this.handlePreview(filelist[4]) } />
            </div></Description>
            <Description term="求助热线">09912552949</Description>
            <Description term="合作热线">09912552949</Description>
            <Description term="热线(备注)">09912552949</Description>
            <Description term="电台频率">乌鲁木齐94.9MHz</Description>
            <Description term="">克拉玛依89.9MHz</Description>
          </DescriptionList>

          <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </Card>
      </PageHeaderLayout>
    );
  }
}
